const SlideMixin = {
	data() {
		return {
			touchMoveDistance: 100,
			animationTime: 150,
			oldTouces: {},
			moveRotate: {
				x: 0,
				y: null
			},
			windowSize: {
				width: 0,
				height: 0
			},
			moveX: 0,
			moveY: 0,
			animation: false,
			angle: 0,
		}
	},
	mounted() {
		const systemInfo = uni.getSystemInfoSync();
		const {
			windowWidth,
			windowHeight
		} = systemInfo;
		this.windowSize = {
			width: windowWidth,
			height: windowHeight
		}
	},
	methods: {
		calcAngleDegrees(x, y) {
			return Math.atan2(y, x) * 180 / Math.PI + 90;
		},
		touchend(e, ins) {
			const instance = e.instance;
			const moveX = this.moveX;
			const moveY = this.moveY;
			const angle = this.angle;
			console.log(moveX)
			if (moveX == undefined || Math.abs(moveX) < (375 / this.windowSize.width) * 100) {

				ins.callMethod('cardPositionReset', {
					animationTime: this.animationTime
				})
				instance.setStyle({
					transform: 'translateX(0px) translateY(0px) rotate(0deg) ',
					'-webkit-transform': 'translateX(0px) translateY(0px) rotate(0deg)',
					'transition': 'all linear  ' + this.animationTime + 'ms'
				})
			} else {
				const d = Math.sqrt(moveX * moveX + moveX * moveX);
				const delMoveDistance = this.windowSize.height;
				const y = (moveY * delMoveDistance) / d;
				const x = (moveX * delMoveDistance) / d;
				const transform = 'translateX(' + x + 'px) translateY(' + y + 'px) ';
				instance.setStyle({
					transform: transform,
					'-webkit-transform': transform,
					'transition': 'all linear  ' + this.animationTime + 'ms'
				})
				ins.callMethod('moveDeleteCard', {
					x,
					y,
					angle,
					animationTime: this.animationTime
				})
			}
		},
		touchMove(e, ins) {
			const instance = e.instance;
			const state = instance.getState();
			const oldTouces = this.oldTouces;
			const newTouces = e.touches[0];

			//平移
			let moveX = newTouces.clientX - oldTouces.clientX;
			let moveY = newTouces.clientY - oldTouces.clientY;
			this.moveX = moveX;
			this.moveY = moveY;
			this.animation = false;

			//移动图片旋转角度
			const angle = this.calcAngleDegrees(moveX - this.moveRotate.x, moveY - this.moveRotate.y);
			this.angle = angle;

			const d = moveX * moveX + moveY * moveY;
			var ratio = Math.sqrt(d) / this.touchMoveDistance;
			ratio = ratio > 1 ? 1 : ratio;

			//移动card动画
			var transform = 'translateX(' + moveX + 'px) translateY(' + moveY + 'px) rotate(' + angle + 'deg)';
			instance.setStyle({
				transform: transform,
				'-webkit-transform': transform,
				'transition': 'all linear  0ms'

			});

			ins.callMethod('touchAnimationStep', {
				moveX: moveX,
				moveY: moveY,
				angle: angle,
				ratio: ratio
			});
			//触摸中判断
			ins.callMethod('moveJudge', {
				x: moveX,
				y: moveY,
				ratio: ratio
			});
		},
		touchStart(e, ins) {
			this.moveX = 0;
			this.moveY = 0;
			this.animation = 0;
			this.angle = 0;

			var instance = e.instance;
			// var state = instance.getState();

			this.$set(this.moveRotate, 'y', this.windowSize.height)
			this.oldTouces = e.touches[0];
		}
	}
}

export default SlideMixin;
